<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
    <title>海量资源数据展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>

<body>
    <div class="map-id" id="mapId"></div>
    <link rel="stylesheet" href="/CloundMap/css/dialog.css">
    <script type="text/javascript" src="/CloundMap/map/Init.js"></script>
    

    <script type="text/javascript" src="/CloundMap/js/jquery.js"></script>
    
    <script src="/CloundMap/js/dialog.js"></script>
    
    <script type="text/javascript">
            var mapConfigResult =  {
                 "mapOpts": {
                     "minZoom":6,
                     "defaultZoom": 15,
                     "maxZoom": 18,
                     "projection": "EPSG:900913",
                     "displayProjection": "EPSG:4326",
                     "restrictedExtent": [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]
                 },
                 "vectorLayer": [{
                     "layerName": "shanghaiBaseMap1",
                     "layerType": "NPMapLib.Layers.BaiduTileLayer",
                     "layerOpt": {
                         "url": ["http://api0.map.bdimg.com/customimage/tile?&x=${x}&y=${y}&z=${z}&udt=20150601&styles=t%3Aland%7Ce%3Ag%7Cc%3A%23303845%2Ct%3Awater%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Agreen%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Aadministrative%7Ce%3Al.t.s%7Cc%3A%231e232a%2Ct%3Ahighway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%7Cw%3A0.1%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23ffffff%7Cw%3A0.1%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aadministrative%7Ce%3Al.t.f%7Cc%3A%2366788f%7Cw%3A0.1%2Ct%3Alabel%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231a1f24%2Ct%3Aroad%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Asubway%7Ce%3Al.i%7Cv%3Aoff%7Cc%3A%2366788f%2Ct%3Ahighway%7Ce%3Al.i%7Cv%3Aoff","http://api1.map.bdimg.com/customimage/tile?&x=${x}&y=${y}&z=${z}&udt=20150601&styles=t%3Aland%7Ce%3Ag%7Cc%3A%23303845%2Ct%3Awater%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Agreen%7Ce%3Aall%7Cc%3A%23232931%2Ct%3Aadministrative%7Ce%3Al.t.s%7Cc%3A%231e232a%2Ct%3Ahighway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Alocal%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Asubway%7Ce%3Aall%7Cv%3Aoff%7Cw%3A0.1%2Ct%3Arailway%7Ce%3Aall%7Cv%3Aoff%7Cc%3A%231e232a%7Cw%3A0.1%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%23ffffff%7Cw%3A0.1%2Ct%3Apoi%7Ce%3Aall%7Cv%3Aoff%2Ct%3Amanmade%7Ce%3Aall%7Cv%3Aoff%2Ct%3Aadministrative%7Ce%3Al.t.f%7Cc%3A%2366788f%7Cw%3A0.1%2Ct%3Alabel%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Aroad%7Ce%3Aall%7Cv%3Aon%7Cc%3A%231a1f24%2Ct%3Aroad%7Ce%3Al.t.f%7Cc%3A%2366788f%2Ct%3Asubway%7Ce%3Al.i%7Cv%3Aoff%7Cc%3A%2366788f%2Ct%3Ahighway%7Ce%3Al.i%7Cv%3Aoff"
                         ],
                         "centerPoint": [108.94937966929062,34.2651289102875],
                         "fullExtent": [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892],
                         "isBaseLayer": true
                     }
                 }],
                 "sattilateLayer": []
             };
            var mapContainer = document.getElementById('mapId');
            var mapConfig = new MapPlatForm.Base.MapConfig();
            var resultJson = mapConfig.createMap(mapContainer, mapConfigResult);
            var map = resultJson.map;
            var mapMultiMarkers = new MapPlatForm.Base.MapMultiMarkers(map,{
                mouseOver:function(marker){
                    marker.setStyle({
                        url:'/CloundMap/images/camera-ball-mouseover.png',
                        width:20,
                        height:20
                    });
                    
                },
                mouseOut:function(marker){
                    marker.setStyle({
                        url:'/CloundMap/images/camera-ball-online.png',
                        width:20,
                        height:20
                    });
                    
                },
                click:function(marker){
                    alert("坐标:"+marker.point.lon+","+marker.point.lat);
                }
            });
            mapMultiMarkers.preventFlash();
            var points = [];
            var pt = map.getCenter();
            var distance = new NPMapLib.GisToolKit().getDistanceByProjection(15000, map);
            for (var i = 0; i < 10000; i++) {
                var lon = distance * 2 * Math.random() + pt.lon - distance;
                var lat = distance * 2 * Math.random() + pt.lat - distance;
                var p = new NPMapLib.Geometry.Point(lon,lat);
                p.opts = {
                    url:'/CloundMap/images/camera-ball-online.png',
                    width:20,
                    height:20
                };
                if(i%2)
                {
                    p.opts = {
                        url:'/CloundMap/images/camera-ball-mouseover.png',
                        width:20,
                        height:20
                    };
                }
                p.data = {
                    type: i%2,
                    id:i
                };
                points.push(p);
            }
            mapMultiMarkers.addMarkers(points);
            function show1(){
                var markers = mapMultiMarkers.getMarkers();
                for(var i = 0;i<markers.length;i++){
                    if(markers[i].data.type === 0){
                        markers[i].show();
                    }
                }
                mapMultiMarkers.refresh();
            }
            function hide1(){
                var markers = mapMultiMarkers.getMarkers();
                for(var i = 0;i<markers.length;i++){
                    if(markers[i].data.type === 0){
                        markers[i].hide();
                    }
                }
                mapMultiMarkers.refresh();
            }
            function show2(){
                var markers = mapMultiMarkers.getMarkers();
                for(var i = 0;i<markers.length;i++){
                    if(markers[i].data.type === 1){
                        markers[i].show();
                    }
                }
                mapMultiMarkers.refresh();
            }
            function hide2(){
                var markers = mapMultiMarkers.getMarkers();
                for(var i = 0;i<markers.length;i++){
                    if(markers[i].data.type === 1){
                        markers[i].hide();
                    }
                }
                mapMultiMarkers.refresh();
            }
    </script>
</body>

</html>
